<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网购物车</title>
<base href="../">
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/cart.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<div class="header_title">
		<a href="#" target="_blank" class="location">衡阳</a>
		
		<div class="header_info">
			<div class="login_info">
				<a v-if="checkLogin" href="user.html" target="_blank" title="点击登录" >您好，[{{user.nickName}}]</a>
				<a v-else href="front/login.htnl" target="_blank" title="点击登录" >您好,请先登录</a>
				<a href="register.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			
			<div class="person_info">
				<span>|</span>
				<a href="front/order.html" target="_blank" href="order.html">我的订单</a>
				<span>|</span>
				<a href="" target="_blank">我的收藏</a>
				<span>|</span>
				<a href="" target="_blank">客服服务</a>
				<span>|</span>
				<a href="user.html" target="_blank">个人信息</a>
			</div>
		</div>
	</div>
	
	<!-- 搜索区域  -->
	<div class="search">
		<div class="search_left">
			<a href="index.html" title="首页">
				<img src="images/logo.png" />
			</a>
			
		</div>
		
		<div class="search_center">
			<div class="search_div">
				<input type="search" placeholder="请输入您要搜索的内容..." />
				<input type="button" value="搜  索" />
			</div>
		</div>
		
		<div class="search_right">
			<i>{{count}}</i>
			<a href="front/cart.html" target="_blank">我的购物车</a>
		</div>
	</div>
	
	<!-- 类型导航 -->
	<div class="nav">
		<a href="javascript:void(0)" :class="{selected: tno == ''}" @click="findByType('')">全部</a>
		<a :class="{selected: tno == item.tno}" v-for="item in types" href="javascript:void(0)" 
			@click="findByType(item.tno)">{{item.tname}}</a>
	</div>
	
	<div class="v_nav">
		<ul>
			<li v-for="item in types" @click="findByType(item.tno)">
				<img :src="'../' + item.pic" />
				<span :class="{selected: tno == item.tno}">{{item.tname}}</span>
			</li>
		</ul>
	</div>
</header>
<!-- 购物车 -->
<article id="app">
    <div class="cart_con">
    	<h2 class="total_count">全部商品<em id="totalcount">{{totalCount}}</em>件</h2>
    	<div class="cart_list_th clearfix">
        	<ul>
            	<li class="col01">商品名称</li>
            	<li class="col02">商品单位</li>
                <li class="col03">商品价格(元)</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
        </div>
    	<div class="cart_list_td clearfix" id="cart_list">
       		<ul v-for="(item, index) in carts">
        		<li class="col01"><input type="checkbox" checked @change="changeCheck($event, item)"></li>
            	<li class="col02"><img :src="'../' + item.pic"></li>
                <li class="col03">{{item.pname}}<br><em>{{item.price}}元/{{item.unit}}g</em></li>
                <li class="col04">{{item.weight}}g</li>
                <li class="col05">{{item.price}}</li>
                <li class="col06">
                	<div class="num_add">
                    	<a href="javascript:void(0)" @click="addCount(item, -1)" class="minus fl">-</a>
                        <input type="text" :value="item.num" class="num_show fl">
                        <a href="javascript:void(0)" @click="addCount(item, 1)" class="add fl">+</a>
                    </div>
                </li>
                <li class="col07" v-html="(item.num * item.price).toFixed(2)"></li>
                <li class="col08"><a href="javascript:;" @click="del(item.cno, index, item.num)">删除</a></li>
            </ul>
        </div>
    	<div class="setElements">
        	<ul>
            	<li class="col01"><input type="checkbox" checked id="all"></li>
            	<li class="col02"><label for="all">全选</label></li>
                <li class="col03">合计(不含运费)：<span>&yen;</span><em id="totalPrices">{{totalPrice}}</em><br>共计<b id="totalNumbers">{{checkCount}}</b>件商品</li>
                <li class="col04"><a href="javascript:void(0)"  @click="gotoPay" >去结算</a></li>
            </ul>
        </div>
    </div>
</article>

<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/hander.js"></script>
<script type="text/javascript">
let app = new Vue({
	el:"#app",
	data: {
		carts: [],
		totalPrice: 0,
		totalCount: 0,
		checkCount: 0
	},
	mounted: function() {
		axios.get("cart/finds").then(rt => {
			if(rt.status == 200){
				if(rt.data.code == 200){
					this.carts = rt.data.data;
					this.carts.forEach((item, index) => {
						this.totalCount += parseInt(item.num);
						this.totalPrice += item.num * item.price;
					})
					this.checkCount = this.totalCount;
					this.totalPrice = parseFloat(this.totalPrice.toFixed(2));
					
					//绑定复选框的点击事件
					this.$nextTick(function() {
						bindEvent();
					})
					return;
				}
				if(rt.data.code == 600){
					showmsg("购物车为空，去购物...", "blue", function() {
						location.href="index.html";
					})
				}
			}
		})
	},
	methods: {
		checkAll: function(flag) {
			let rt = flag ? 1 : 0;
			this.carts.forEach((item, index) => {
				item.status = rt;
			})
			this.getTotal();
		},
		getTotal: function() {
			this.checkCount = 0;
			this.totalPrice = 0;
			this. carts.forEach((item, index) => {
				if(item.status == 1){
					this.checkCount += parseInt(item.num);
					this.totalPrice += item.num * item.price;
				}
			})
			this.totalPrice = parseFloat(this.totalPrice.toFixed(2));
		},
		changeCheck: function(that, item){
			if(that.target.checked){
				item.status = 1;
				
				//所有的都选中
				let checkboxs = $("#cart_list input[type='checkbox']");
				for(let i = 0, len = checkboxs.length; i < len; ++i){
					if(!checkboxs[i].checked){
						$("#all").prop("checked", false);
						this.getTotal();
						return;
					}
				}
				$("#all").prop("checked", true);
			} else {
				item.status = 0;
				$("#all").prop("checked", false);
			}
			this.getTotal();
		},
		del: function(cno, idx, num){
			if(confirm("数据一旦删除将不能恢复...")){
				axios.post("cart/del", qs.stringify({cno: cno})).then( rt => {
					if(rt.status == 200 && rt.data.code == 200)	{
						this.carts.splice(idx, 1);
						header.$data.carts.splice(idx, 1);
						this.getTotal();
						this.totalCount -= num;
						return;
					}
					showmsg("删除购物车失败，请稍后重试...", "red");
				})
			}
		},
		addCount: function(item, num) {
			if(num == -1 && item.num == 1){
				return;
			}
			axios.post("cart/update", qs.stringify({cno: item.cno, num: num})).then( rt => {
				if(rt.status == 200 && rt.data.code == 200){
					console.log(num);
					item.num = parseInt(item.num);
					item.num += num;
					this.getTotal();
					return;
				}
				showmsg("数据修改失败，请稍后重试...", "red");
			})
		},
		gotoPay:function(){
			let cnos = [];
			this.carts.forEach((item, index) => {
				if(item.status == 1){
					cnos.push(item.cno);
				}
			})
			
			if(cnos.length <= 0){
				showmsg("请选择你要结算的商品...", "yellow");
				return;
			}
			
			localStorage.removeItem('cnos');
			localStorage.setItem("cnos", cnos.join(","));
			location.href="front/pay.html";
		}
	}
})

function bindEvent(){
	$("#all").unbind();
	$("#all").click(function() {
		let flag = $(this).prop("checked");
		$("#cart_list input[type='checkbox']").prop("checked", flag);
		app.checkAll(flag);
	})
}
</script>
</body>
</html>
